import React from "react";
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import "./SearchBar.scss";

interface SearchBarProps {
   placeholder?: string;
   onClick?: () => void;
   children?: React.ReactNode|string;
}

const SearchBar: React.FunctionComponent<SearchBarProps> = ({ placeholder, onClick, children }) => {
   return (
      <div className="search-bar" onClick={onClick}>
         <div className="input">
            <SvgIcon name="search" width="15px" height="15px"></SvgIcon>
            <span>{placeholder}</span>
         </div>
         <div className="slot">
            {children}
         </div>
      </div>
   );
};

export default SearchBar;
